<template>
  <!-- 自定义顶部栏 -->
  <view class="nav" :style="{height:navBarHeight+'px'}">
    <view class="content"
      :style="{height:menuConfig.height+'px', minHeight:menuConfig.height+'px',lineHeight:menuConfig.height+'px', left:menuConfig.left+'px', top:menuConfig.top+'px'}">
      <view class="nav-operation">
        <view @click="switchPopup" class="nav-operation-content">
          <view class="title-online" v-if="onlineConfig.online">在线</view>
          <view class="title-offline" v-else>离线</view>
          <image class="nav-pull-avatar" src="/static/images/up.png"></image>
        </view>
        <view v-if="onlineConfig.visible" class="operation-box">
          <view @click="online" class="status-box">
            <view>
              <text class="status">在线</text>
              <image v-if="onlineConfig.online" class="status-avatar" src="/static/images/tick.png">
              </image>
            </view>
            <text class="status-desc">接收客服消息通知</text>
          </view>
          <view class="line"></view>
          <view @click="offline" class="status-box">
            <view>
              <text class="status">离线</text>
              <image v-if="!onlineConfig.online" class="status-avatar" src="/static/images/tick.png">
              </image>
            </view>
            <text class="status-desc">不接收客服消息通知</text>
          </view>
        </view>
      </view>
      <view class="title">
        {{title}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "navigation",
    props: {
      multipleSlots: {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        csteam: null,
        onlineConfig: {
          online: false,
          visible: false
        },
        navBarHeight: 0,
        menuConfig: {
          top: 0,
          left: 0,
          height: 0,
        },
      };
    },
    mounted() {
      this.initPageSize();
    },
    onReady() {
      let teamId = uni.getStorageSync('team').id;
      this.csteam = this.goEasy.im.csteam(teamId);
      this.initialOnlineStatus();
    },
    methods: {
      initPageSize() {
        // 获取系统信息
        const systemInfo = uni.getSystemInfoSync();
        // 胶囊按钮位置信息
        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        // 导航栏高度 = 状态栏高度 + 44
        this.navBarHeight = systemInfo.statusBarHeight + 44;
        this.menuConfig.left = systemInfo.screenWidth - menuButtonInfo.right;
        this.menuConfig.top = menuButtonInfo.top;
        this.menuConfig.height = menuButtonInfo.height;
      },
      switchPopup() {
        this.onlineConfig.visible = !this.onlineConfig.visible
      },
      initialOnlineStatus() {
        this.csteam.isOnline({
          onSuccess: (result) => {
            this.onlineConfig.online = result;
            console.log('获取在线状态成功', this.onlineConfig.online)
          },
          onFailed: (error) => {
            console.log('获取在线状态失败，error:', error)
          }
        })
      },
      online() {
        let userinfo = uni.getStorageSync('userinfo');
        console.log("获取在线客服", userinfo);
        console.log("获取在线客服的团队", this.csteam);
        this.csteam.online({
          teamData: {
            name: '星沐泞咨询',
            avatar: '/static/logo.png'
          },
          agentData: {
            name: userinfo.nickname,
            avatar: userinfo.avatar,
            id: userinfo.id
          },
          onSuccess: () => {
            console.log("在线客服团队成功");
            this.onlineConfig.online = true;
            this.onlineConfig.visible = false;
            uni.showToast({
              title: "上线成功",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
          },
          onFailed: (error) => {
            console.log("在线客服团队报错", error);
            this.onlineConfig.visible = false;
            uni.showToast({
              title: error.content,
              icon: 'none'
            });
          }
        })
      },
      offline() {
        console.log("点击了下线");
        this.csteam.offline({
          onSuccess: () => {
            console.log("点击了下线-成功");
            this.onlineConfig.online = false;
            this.onlineConfig.visible = false;
            uni.showToast({
              title: "下线成功",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
          },
          onFailed: (error) => {
            console.log("点击了下线", error);
            this.onlineConfig.visible = false
            if (error.content.includes("Please end your accepted conversations first")) {
              uni.showToast({
                title: '下线失败，请先结束已接入的会话！',
                icon: 'none'
              });
            }else{
              uni.showToast({
                title: '下线失败！',
                icon: 'none'
              });
            }
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .nav {
    position: fixed;
    top: 0;
    z-index: 9999999;
    width: 100%;
    color: #fff;
    background: #f4f4f4;
  }

  .nav .content {
    position: absolute;
    width: 100%;
    padding-left: 28rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    color: #333;
  }

  .nav-operation {
    display: flex;
    align-items: center;
    position: relative;
  }

  .nav-operation-content {
    display: flex;
    align-items: center;
  }

  .title-online {
    margin-right: 20rpx;
    color: #D02129;
    font-size: 28rpx;
  }

  .title-offline {
    margin-right: 20rpx;
    color: #7f7f7f;
    font-size: 28rpx;
  }

  .nav-pull {
    width: 28rpx;
    height: 28rpx;
  }

  .nav-pull-avatar {
    width: 28rpx;
    height: 28rpx;
    transform: rotate(180deg);
  }

  .operation-box {
    position: absolute;
    top: 70rpx;
    min-width: 300rpx;
    padding: 40rpx;
    border-radius: 8rpx;
    background: #4c4c4c;
  }

  .operation-box::before {
    content: "";
    position: absolute;
    top: -30rpx;
    left: 60rpx;
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-top: 16rpx solid transparent;
    border-bottom: 16rpx solid #4c4c4c;
  }

  .status-box {
    line-height: 50rpx;
  }

  .status {
    margin-right: 10rpx;
    color: #fff;
  }

  .status-avatar {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
  }

  .status-desc {
    color: #7C7C7C
  }

  .line {
    width: 100%;
    height: 2rpx;
    margin: 20rpx 0;
    background: #aaa;
  }

  .title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 400rpx;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000000;
    font-size: 32rpx;
    font-weight: 500;
  }
</style>